<template>
  <div>
    <TableQuery
      v-model:queryForm="queryForm"
      :loadTableList="loadTableList"
      :removeQueryField="removeQueryField"
      :clearQuery="clearQuery"
      :queryFormHeaders="queryFormHeaders"
    />
  </div>
</template>

<script lang="ts" setup>
import TableQuery from '@/components/base/table/TableQueryComponent.vue';
import { ref } from 'vue';
import { yesOrNoDict, dictToMap, permissionTypeDict, permissionLinkTypeDict } from '@/api/dict';

interface Props {
  // 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  loadTableList: () => void; // 当每页数据显示数发生变化时触发的一个函数
  clearQuery: () => void; // 清空查询条件
  removeQueryField: (key: string) => void; // 移除查询条件中的某个元素
}
const props = withDefaults(defineProps<Props>(), {});
// 查询组件表单对象。
const queryForm = defineModel<Record<string, any>>('query', {
  required: true,
  default: {}
});

const queryFormHeaders = [
  // 查询表单
  {
    prop: 'name',
    label: '权限名称'
  },
  {
    prop: 'permission',
    label: '权限标识'
  },
  {
    prop: 'type',
    label: '类型',
    type: 'select',
    list: permissionTypeDict
  },
  {
    prop: 'linkType',
    label: '菜单类型',
    type: 'select',
    list: permissionLinkTypeDict,
    show: false
  }
];
</script>
<style lang="scss" scoped></style>
